<!DOCTYPE html>
<html>

<head>
    <title>黑马顺风车</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css">
    <script src="../js/jquery-1.11.3.min.js"></script>
    <script src="../js/jquery.mobile-1.4.5.min.js"></script>
    <link rel="stylesheet" href="../css/common.css" />
    <script type="text/javascript" src="../js/common.js"></script>
    <script type="text/javascript" src="../js/upload.js"></script>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
        }

        table .h {
            width: 50%;
            height: 50px;
            font-weight: bold;
        }

        img {
            width: 100%;
            height: 100%;
            max-height: 100px;
        }
    </style>
    <script>
        $(function () {

            $('.person-img').attr('src', current_user.avatar);
            $('#driverName').text((current_user.useralias == '') ? current_user.username : current_user.useralias);
            $('#valid').text((current_user.status == 1) ? '已完成' : '未完成');
            $('#driver').text((current_user.role == 1) ? '已完成' : '未完成');



            $.post('/account/api/getVehicleInfo', '{}', function (data) {
                if (data.code == -1002) {
                    //未认证过
                    data.data = [{}];
                }
                var defImg = '../img/default-card.png';
                var d = data.data[0];
                $('table').find('img').each(function () {
                    $(this).attr('src', d[$(this).attr('class')] || defImg);
                    $('input[name="' + $(this).attr('class') + '"]').val(d[$(this).attr('class')]);
                })

                if (current_user.role == 1) {
                    renderByTemplate('#authDiv', '#template', d);
                    $('#authBtn').remove();
                }
            });

            $('li').eq(0).removeClass('ui-first-child');
            var roleName = (localStorage.getItem('current_role') == '0' ? 'user' : 'driver');
            $('.role').each(function () {
                $(this).attr('href', '../' + roleName + '/' + $(this).attr('href'));
            });
        })

        function validBtn() {
            if (!($('.carFrontPhoto').attr('src').startsWith('http'))
                || !($('.carBackPhoto').attr('src').startsWith('http'))) {
                showMsg('您必须先上传车辆信息');
                return;
            }
            $.post('/account/api/vehicleAuth', '{}', function (data) {
                console.log(data);
                if(data.code == -1){
                    showMsg('认证失败！');
                }else{
                    renderByTemplate('#authDiv', '#template', data.data[0]);
                    showMsg(data.message);
                    topDiv.scrollIntoView();
                    toUrl('userCenter.html', 1500);
                }

            });
        }

    </script>
</head>

<body>
    <div id="template" style="display: none;">
        <br>
        <h2>认证通过！</h2>
        <br>
        <p><b>车牌号：</b><span id="carNumber">{carNumber}</span></p>
    </div>
    <div id="topDiv"></div>
    <div data-role="page" id="pageone">
        <div data-role="header" data-position="fixed" data-tap-toggle="false">
            <a href="#" data-rel="back"
                class="ui-btn ui-btn-inline ui-icon-arrow-l ui-btn-icon-notext ui-corner-all">使用圆圈（默认）</a>
            <h1>车主认证</h1>
        </div>

        <ul data-role="listview" data-inset="true" id="defaultpanel" style="margin:15px;">
            <li>
                <a href="#" class="ui-btn"
                    style="border-top-left-radius: 5px; border-top-right-radius: 5px; background-color:#ddd;">
                    <img class="person-img" src="" style="width:70px;height:70px;margin-top:25px;margin-left:10px;">
                    <h2 id="driverName" id="useralias"></h2>
                    <p></p>
                    <p><span>实名认证：</span> <span style="color:darkgoldenrod" id="valid">未完成</span></p>
                    <p></p>
                    <p><span>车主认证：</span> <span style="color:darkgoldenrod" id="driver">已完成</span></p>
                </a>
            </li>
            <li>
                <form id="validForm">
                    <input name="carFrontPhoto" type="hidden">
                    <input name="carSidePhoto" type="hidden">
                    <input name="carBackPhoto" type="hidden">
                </form>
                <table style="width:100%">
                    <tr>
                        <td class="h">车辆正面：</td>
                        <td class="h">行驶证：</td>
                    </tr>
                    <tr>
                        <td>
                            <!-- ajax文件上传案例，命名规范：file的id = input的name = img的class -->
                            <!-- file的name必须是file，固定的 -->
                            <img src="../img/default-card.png" class="carFrontPhoto" />
                        </td>
                        <td>
                            <!-- ajax文件上传案例，命名规范：file的id = input的name = img的class -->
                            <!-- file的name必须是file，固定的 -->
                            <img src="../img/default-card.png" class="carBackPhoto" />
                        </td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div class="ui-content2" style="margin: 0px;" id="authDiv">
                                <h2 id="authInfo" style="text-align: center;">认证信息</h2>
                            </div>
                        </td>
                    </tr>

                </table>
            </li>
            <li>
                <p>
                    <button id="authBtn" class="ui-btn-active" onclick="validBtn()" style="width:80px;float:right;">认证</button>
                </p>
            </li>
        </ul>

        <div data-role="footer" data-position="fixed" data-tap-toggle="false">
            <div data-role="navbar" style="margin: 0;" id="footerLink">
                <ul>
                    <li><a href="user.html" data-ajax="false" data-icon="home" class="role">首页</a></li>
                    <li><a href="trip.html" data-ajax="false" data-icon="grid" class="role">我的行程</a></li>
                    <li><a href="order.html" data-ajax="false" data-icon="bullets" class="role">我的订单</a></li>
                    <li><a href="userCenter.html" data-ajax="false" data-icon="user" class="ui-btn-active">个人中心</a></li>
                </ul>
            </div>
        </div>
    </div>

</body>

</html>